<template>
  <div class="rateQuery">
        <a-row>
              <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">交易限额</a-col>
              <a-col :xs="{ span : 24 }" :sm="{ span:17 }">
                <p class="p-sty">
                  无限额请用“0”表示
                </p>
              </a-col>
            </a-row>
        <div style="width: 100%; margin: 10px auto">
        <a-row style="background: rgb(236 236 236); padding: 10px">
          <a-col :span="6"><div>交易功能</div>  </a-col>
          <a-col :span="6"><div style="padding-left:0px">单日限额（＜万）</div>  </a-col>
          <a-col :span="6"><div style="padding-left:0px">单笔限额（＜万）</div>  </a-col>
          <a-col :span="6"><div style="padding-left:0px">单卡单日限笔(≤笔)</div>  </a-col>
        </a-row>
        <div v-for="(item,index) in translimitlist2" :key="index" class="rateTable">
          <div>
            <a-row>
              <a-col :span="6">
                {{ item.name }}
              </a-col>
              <a-col :span="6">
                <a-input-number :step="0.01" :min="0" v-model="item.dayAmountLimit" style="width: 60%" />
              </a-col>
              <a-col :span="6">
                <a-input-number  :step="0.01" :min="0" v-model="item.singleAmountLimit" style="width: 60%" />
              </a-col>
              <a-col :span="6">
                <a-input-number v-if="item.code == 'pos_d' || item.code == 'pos_c'" 
                :step="1" :min="0" v-model="item.cardTransLimit" style="width: 60%" />
              </a-col>
              
                  
            </a-row>
          </div>
        </div>

      </div>
  </div>
</template>
<script>
export default {
  components: {
    
  },
  props: {
    translimitParams:Array
  },
  watch: {
    translimitParams: {
      deep: true,  // 深度监听
      handler(newVal,oldVal) {
        //  console.log(newVal,oldVal)
         if(newVal != oldVal){
           this.settranslimitlist(newVal);
         }
      }
    }
  },
  data() {
    return {
      trans: [],
      translimitlist: [],
      translimitlist2: [],
     
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
          md: { span: 16 }
        }
      }
    };
  },
  mounted() {
    
  },

  methods: {
    inputValue(value){
      if(value == "" || value == undefined){
        this.$message.error("请输入正确的数值")
      }
    },
    setValue(){
      console.log(e.taget.value)
    },
    settranslimitlist(list){
      let trans = []

      this.translimitlist2 = list

      for(let idx in list){
          trans.push({
            dayAmountLimit:list[idx].dayAmountLimit,
            singleAmountLimit:list[idx].singleAmountLimit,
            cardTransLimit:list[idx].cardTransLimit,
          })
        if(this.translimitlist2[idx].open){

          this.translimitlist2[idx].dayAmountLimit = this.translimitlist2[idx].dayAmountLimit / 1000000
          this.translimitlist2[idx].singleAmountLimit = this.translimitlist2[idx].singleAmountLimit / 1000000

        }else{

          this.translimitlist2[idx].dayAmountLimit = null
          this.translimitlist2[idx].singleAmountLimit = null
          this.translimitlist2[idx].cardTransLimit = null

        } 
      }

      this.trans = trans

    },
    getTranslimitlist(){
      this.translimitlist = []

      console.log("this.trans",this.trans)
      console.log("this.translimitlist2",this.translimitlist2)
      for(let idx in this.translimitlist2){
        
        let aa = {
          id : this.translimitlist2[idx].id,
          dayAmountLimit : this.translimitlist2[idx].dayAmountLimit == null ? this.trans[idx].dayAmountLimit : this.translimitlist2[idx].dayAmountLimit * 1000000,
          singleAmountLimit : this.translimitlist2[idx].singleAmountLimit == null ? this.trans[idx].singleAmountLimit : this.translimitlist2[idx].singleAmountLimit * 1000000,
          cardTransLimit : this.translimitlist2[idx].cardTransLimit == null ? this.trans[idx].cardTransLimit : this.translimitlist2[idx].cardTransLimit,
          monthAmountLimit : this.translimitlist2[idx].monthAmountLimit,
          yearAmountLimit : this.translimitlist2[idx].yearAmountLimit,
          code :this.translimitlist2[idx].code,
          name : this.translimitlist2[idx].name,
          open : this.translimitlist2[idx].open,
        }

        this.translimitlist.push(aa)
      }

      console.log("translimitlist",this.translimitlist)

    }
  }
};
</script>
<style lang="less" scoped>

.rateTable {
   border-bottom: 1px solid #cccccc; 
   padding: 20px 0
}
.rateQuery {
  overflow: scroll;
  height: 100%;
  /* padding: 30px; */
  overflow-x: hidden;
  overflow-y: auto;
}
/*滚动条样式*/
.rateQuery::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

.rateQuery::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.rateQuery::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.ratebutton {
  text-align: center;
}
.p-sty {
  color: #999;
  padding-left: 30px;
  line-height: 30px;
}
.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: right;
}
</style>
